<template>
  <div class="notifications">
    <transition-group name="list">
      <notification v-for="(notification) in notifications"
                    :key="notification.timestamp.getTime()"
                    :message="notification.message"
                    :icon="notification.icon"
                    :type="notification.type"
                    :timestamp="notification.timestamp"
                    :vertical-align="notification.verticalAlign"
                    :horizontal-align="notification.horizontalAlign"
                    @on-close="removeNotification">
      </notification>
    </transition-group>

  </div>
</template>
<script>
import Notification from "./Notification.vue";
export default {
  components: {
    Notification
  },
  data() {
    return {
      notifications: this.$notifications.state
    };
  },
  methods: {
    removeNotification(timestamp) {
      this.$notifications.removeNotification(timestamp);
    }
  }
};
</script>
<style lang="scss">
.list-move {
  transition: transform 0.3s, opacity 0.4s;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: opacity 0.4s;
}
.list-enter, .list-leave-to  /* .list-leave-active for <2.1.8 */ {
  opacity: 0;
}
</style>
